<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <!-- 搜索框 -->
    <van-search v-model="value" background="#ff6040" placeholder="按内容搜索"/>
    <!-- 商品列表 -->
    <van-card
      @click="goDetail(item.id)"
      v-for="item in goodslist"
      :key="item.id"
      num="1"
      :price="item.price | toPrice"
      desc="描述信息"
      :title="item.goodsname"
      :thumb="item.img"
      :origin-price="item.market_price | toPrice"
    />
  </div>
</template>

<script>
import { goodsList } from "../request/api";
export default {
  data() {
    return {
      goodslist: [],
      value: ""
    };
  },
  mounted() {
    //组件一加载就调用
    goodsList({
      cateid: this.$route.query.id
    }).then(res => {
      console.log(res, "商品列表");
      if (res.code == 200) {
        this.goodslist = res.list.goodData;
      }
    });
  },
  methods: {
    //跳转详情
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped>
.van-nav-bar {
  background: #ff6040;
  height: 50px;
  color: #fff;
}
</style>
